@import "common";

.comments {
  background: white;
  margin: 10px 0 35px;
  width: 100%;
}

.comments .comments-body {
  padding: 0 $widgetPaddingLeftRight 20px;
  overflow-x: auto;
}

.comment {
  padding: 15px 20px 0;
  margin: 0 -20px;
  border-bottom: 1px rgba(0, 0, 0, .02) solid;
  .comment-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
}

.comment .comment {
  border-bottom: none;
}

.comment > .comment-info {
  margin-left: 50px;

  .comment-time {
    font-size: 0.9rem;
    color: #d0d0d0
  }

  .comment-operation {
    color: #d0d0d0
  }
  .comment-head {
    font-size: 1.2rem
  }
  & > .comment-content {
    line-height: 1.8;
    font-weight: normal;
    word-wrap: break-word;
    font-size: 1.2rem;
    padding-top: 10px;
    img:not(.comment-avatar) {
      display: block;
      max-width: 95%;
    }
    & > .comment-operation {
      padding-bottom: 10px;
      color: #eee;
      font-size: .9rem;
      .comment-operation-item {
        margin-right: 10px;
        color: #ccc;
      }
      a:hover {
        text-decoration: underline;
      }
    }
  }
}

#comment-form {
  margin-top: 20px;
}

.comment-form {
  font-size: 1rem;
}